<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
        function validateData(){
        	if ($("#usernamesignup").val()==""){
        		alert("Please enter your name!");
        		return false;
        	}else if ($("#emailsignup").val()==""){
        		alert ("Please enter your email!");
        		return false;
        	}else if ($("#passwordsignup").val()==""||$("#passwordsignup_confirm").val()==""){
        		alert ("Please enter your password!");
        		return false;
        	}else if ($("#passwordsignup").val()!=$("#passwordsignup_confirm").val()){
        		alert ("Passwords don't match!");
        		return false;
        	}else{
        		return true;
        	}
        }
</script>
<title>Welcome To Ebid!</title>
<!-- <link href="Site.css" rel="Stylesheet" type="text/css"/>
 -->
 </head>
  <body>


<div id="container" >
    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
    <a class="hiddenanchor" id="toregister"></a>
    <a class="hiddenanchor" id="tologin"></a>
    <div id="wrapper">
        <div id="login" class="animate form">
            <form  autocomplete="on" action="login" method="post"> 
                <h1>Log in</h1> 
                <p> 
                    <label for="username" class="uname" data-icon="u" > Your Email: </label>
                    <input id="emailSignin" name="emailSignin" required="required" type="text" />
                </p>
                <p> 
                    <label for="password" class="youpasswd" data-icon="p"> Your Password: </label>
                    <input id="passwordSignin" name="passwordSignin" required="required" type="password"  /> 
                </p>
                <p class="login button"> 
                    <input type="submit" value="Login" /> 
                </p>
            </form>
        </div>
 
        <div id="register" class="animate form" >
            <form  autocomplete="on" action="signup" method="post" onsubmit="return validateData();"> 
                <h1> Subscribe </h1> 
                <p> 
                    <label for="usernamesignup" class="uname" data-icon="u">Your Name: </label>
                    <input id="usernamesignup" name="nameSignup" required="required" type="text"/>
                </p>
                <p> 
                    <label for="emailsignup" class="youmail" data-icon="e" > Your Email: </label>
                    <input id="emailsignup" name="emailSignup" required="required" type="email"/> 
                </p>
                <p> 
                    <label for="passwordsignup" class="youpasswd" data-icon="p">Your Password: </label>
                    <input id="passwordsignup" name="passwordSignup" required="required" type="password"/>
                </p>
                <p> 
                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please Confirm Password: </label>
                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password"/>
                </p>
                
                <p class="keeplogin"> 
                    <label for="usertype">Select User Type: </label>
                    <select name="typeSignup" id="usertype" value="usertype" >
					  <option value="Buyer">Buyer</option>
					  <option value="Seller">Seller</option>
					</select>
                </p>
                
                <p class="signin button"> 
                    <input type="submit" value="Subscribe"/> 
                </p>
            </form>
        </div>
        
        <div id="unsubscribe" class="animate form">
            <form  autocomplete="on" action="unsub" method="post"> 
                <h1>Unsubscribe</h1> 
                <p> 
                    <label for="username" class="uname" data-icon="u" > Your Email: </label>
                    <input id="username" name="unsubEmail" required="required" type="text" />
                </p>
                <p> 
                    <label for="password" class="youpasswd" data-icon="p"> Your Password: </label>
                    <input id="password" name="unsubPassword" required="required" type="password"  /> 
                </p>
                <p class="login button"> 
                    <input type="submit" value="Unsubscribe" /> 
                </p>
            </form>
        </div>
         
    </div>
</div>  



  </body>
</html>